<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:icecore="http://www.icefaces.org/icefaces/core"
                xmlns:ace="http://www.icefaces.org/icefaces/components"
                xmlns:ice="http://www.icesoft.com/icefaces/component"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="body_content">
        
        
        <img src="img/appbar.base.arrow.png" alt="ir atras" class="nav-back" onclick="history.go(-1)" />
        <h3 class="header-bg" style="text-align: center">Sistema de Información Vehicular | Consulta múltiple</h3>
            

            
            
        <!-- <h:graphicImage value="img/new_icons/seach2.png" class="ico-head" /> -->
        <ace:panel id="panel_principal"  header="Búsqueda de información de vehículos" styleClass="panel-principal">

            <h:graphicImage value="img/new_icons/seach2.png" class="ico-head"  />
            <span Class="titulo_panel">Utilice cualquiera de los filtros para realizar la búsqueda</span>
                     
            <h:form id="form_consulta_multiple"> 
                <h:panelGrid   id="inputGrid" columns="3" width="100%" styleClass="filtros-panel centeredPanelGrid">
                    
                    
                    
                    
                    

                    <ace:textEntry id="MarcaFilter"  value=" " label="Marca:" labelPosition="left" >
                        <ace:ajax render="@this placaFilterOutput placaFilterMsg"/>
                    </ace:textEntry> 
                            
                    <ace:textEntry id="PlacaFilter" value=" " label="Placa:" labelPosition="left" >
                        <ace:ajax render="@this cedulaFilterOutput cedulaFiltereMsg"/>
                    </ace:textEntry>  
                    <ace:textEntry id="AñoFilter" value=" " label="Año de fabricación:" labelPosition="left" >
                        <ace:ajax render="@this marchamoFilterOutput marchamoFilterMsg"/>
                    </ace:textEntry>  
                    <ace:textEntry id="estacionamientoFilter" value=" " label="Tipo estacionamiento:" labelPosition="left" >
                        <ace:ajax render="@this estacionamientoFilterOutput estacionamientoFilterMsg"/>
                    </ace:textEntry>
                    <ace:autoCompleteEntry id="autoComplete"
                                           rows="20" width="135"
                                           filterMatchMode=""
                                           label="Color:"
                                           labelPosition="left">
                        <f:selectItems />
                    </ace:autoCompleteEntry>
                    <input type="button" Class="botonEnviarConsulta" value="Buscar" name="Buscar" />
                </h:panelGrid>
                    
                <!-- INICIO TOOLTIPS ================================================= -->
                <ace:tooltip id="tooltipColor"
                             for="autoComplete"
                             speechBubble="true"
                             showEffect="slide"
                             hideEffect="grow"
                             showDelay="500"
                             hideDelay="300"
                             position="bottomLeft"
                             targetPosition="topLeft"
                             showEffectLength="300"
                             hideEffectLength="300">
                    <h:panelGrid styleClass="tooltipBoxStyle"> 
                        <h:outputText id="AutoComplete_mns" value="Digite el color a buscar"/>
                    </h:panelGrid>   
                </ace:tooltip>
                                
                <ace:tooltip id="tooltipMarca"
                             for="MarcaFilter"
                             speechBubble="true"
                             showEffect="slide"
                             hideEffect="grow"
                             showDelay="500"
                             hideDelay="300"
                             position="bottomLeft"
                             targetPosition="topRight"
                             showEffectLength="300"
                             hideEffectLength="300">
                    <h:panelGrid styleClass="tooltipBoxStyle"> 
                        <h:outputText id="Placa_mns" value="Digite la marca a buscar"/>
                    </h:panelGrid>   
                </ace:tooltip>
                                
                <ace:tooltip id="tooltipPlaca"
                             for="PlacaFilter"
                             speechBubble="true"
                             showEffect="slide"
                             hideEffect="grow"
                             showDelay="500"
                             hideDelay="300"
                             position="bottomLeft"
                             targetPosition="topRight"
                             showEffectLength="300"
                             hideEffectLength="300">
                    <h:panelGrid styleClass="tooltipBoxStyle"> 
                        <h:outputText id="placa_mns" value="Digite la cantidad de digitos de la placa a buscar"/>
                    </h:panelGrid>   
                </ace:tooltip>
                                
                <ace:tooltip id="tooltipAño"
                             for="AñoFilter"
                             speechBubble="true"
                             showEffect="slide"
                             hideEffect="grow"
                             showDelay="500"
                             hideDelay="300"
                             position="bottomLeft"
                             targetPosition="topRight"
                             showEffectLength="300"
                             hideEffectLength="300">
                    <h:panelGrid styleClass="tooltipBoxStyle"> 
                        <h:outputText id="Año_Mns" value="Digite el año a buscar"/>
                    </h:panelGrid>   
                </ace:tooltip>
                                
                <ace:tooltip id="tooltipEstacionamiento"
                             for="estacionamientoFilter"
                             speechBubble="true"
                             showEffect="slide"
                             hideEffect="grow"
                             showDelay="500"
                             hideDelay="300"
                             position="bottomLeft"
                             targetPosition="topRight"
                             showEffectLength="300"
                             hideEffectLength="300">
                    <h:panelGrid styleClass="tooltipBoxStyle"> 
                        <h:outputText id="Estacionamiento_Mns" value="Digite el nombre del estacionamiento a buscar"/>
                    </h:panelGrid>   
                </ace:tooltip>
                <!-- FIN TOOLTIPS ================================================= -->
                    
                    
                    
                <ace:panel>
                    
                    <h:panelGrid columns="3" styleClass="centeredPanelGrid">
                        <h:outputLabel for="typeIn" value="Exportar Como:"/>
                        <h:selectOneRadio id="typeIn" value=" " required="true">
                            <f:ajax disabled="false"/>
                            <f:selectItem itemValue="csv" itemLabel="CSV"/>
                            <f:selectItem itemValue="pdf" itemLabel="PDF"/>
                            <f:selectItem itemValue="xls" itemLabel="XLS"/>
                            <f:selectItem itemValue="xml" itemLabel="XML"/>
                        </h:selectOneRadio>
                        <ace:dataExporter id="dataExporter" label="Exportar Archivo" type=" " target="carTable" fileName="cars" styleClass="btn_exportar"/>
                    </h:panelGrid>
                        
                </ace:panel>
                    
                <h:graphicImage value="img/new_icons/results1.png" class="ico-head" />
                <span Class="titulo_panel">Resultados obtenidos</span>
                    
                <ice:dataTable
                    value="#{resultadosConsultaMultiple.consultaMultiple}"
                    var="item"
                    width="100%">
                    
                    <!-- Stock number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Color"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="#{item.color}"/>
                    </ice:column>
                    
                    <!-- Model number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Número de serie"/>
                        </f:facet>
                        <ice:outputText style="text-align: center;" value="#{item.numeroSerie}"/>
                    </ice:column>
                    
                    <!-- Description  -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Marca"/>
                        </f:facet>
                        <ice:outputText style="text-align: center;" value="#{item.marca}"/>
                    </ice:column>
                    
                    <!-- Odometer reading -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Modelo"/>
                        </f:facet>
                        <ice:outputText style="text-align: center;" value="#{item.modelo}"/>
                    </ice:column>
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Año"/>
                        </f:facet>
                        <ice:outputText style="text-align: center;" value="#{item.ano}"/>
                    </ice:column>
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Propietario"/>
                        </f:facet>
                        <ice:outputText style="text-align: center;" value="#{item.propietario}"/>
                    </ice:column>
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Cédula"/>
                        </f:facet>
                        <ice:outputText style="text-align: center;" value="#{item.cedula}"/>
                    </ice:column>
                    
                    
                </ice:dataTable>

            </h:form> 
                  
        </ace:panel>

        
            </ui:define>
</ui:composition>
